Search
Styling Buttons in WordPress Block Themes
9.1.2023
A little while back, Ganesh Dahal penned a post here on CSS-Tricks responding to a tweet that asked about adding CSS box shadows on WordPress blocks and elements. There’s a lot of great stuff in there that leverages new features …
Styling Buttons in WordPress Block Themes originally...
Saving Settings for a Custom WordPress Block in the Block Editor
12.12.2022
We’ve accomplished a bunch of stuff in this series! We created a custom WordPress block that fetches data from an external API and renders it on the front end. Then we took that work and extended it so the data …
Saving Settings for a Custom WordPress Block in the Block Editor originally...
Adding Box Shadows to WordPress Blocks and Elements
7.12.2022
The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.
Adding Box Shadows to WordPress Blocks and Elements originally...
Creating a Settings UI for a Custom WordPress Block
17.11.2022
So far, we’ve covered how to work with data from an external API in a custom WordPress block. We walked through the process of fetching that data for use on the front end of a WordPress site, and how to …
Creating a Settings UI for a Custom WordPress Block originally published on CSS-Tricks...
Rendering External API Data in WordPress Blocks on the Back End
1.11.2022
This is a continuation of my last article about “Rendering External API Data in WordPress Blocks on the Front End”. In that last one, we learned how to take an external API and integrate it with a block that …
Rendering External API Data in WordPress Blocks on the Back...
Rendering External API Data in WordPress Blocks on the Front End
11.10.2022
There’ve been some new tutorials popping here on CSS-Tricks for working with WordPress blocks. One of them is an introduction to WordPress block development and it’s a good place to learn what blocks are and to register them in WordPress …
Rendering External API Data in WordPress Blocks...
Adding Fluid Typography Support to WordPress Block Themes
7.10.2022
Fluid typography is a fancy way of “describing font properties, such as size or line height, that scale fluidly according to the size of the viewport”. It’s also known by other names, like responsive typography, flexible type, fluid type, …
Adding Fluid Typography Support to WordPress Block...
Getting Started With WordPress Block Development
30.9.2022
Let’s acknowledge that developing for WordPress is weird right now. Whether you’re new to WordPress or have worked with it for eons, the introduction of “Full-Site Editing” (FSE) features, including the Block Editor (WordPress 5.0) and the Site Editor (WordPress …
Getting Started With...
A Deep Introduction to WordPress Block Themes
4.2.2022
The relatively new WordPress editor, also known as the WordPress Block Editor, always under development via the Gutenberg plugin, has been with us since 2018. You can use the block editor on any WordPress theme, provided the theme …
A Deep Introduction to WordPress Block Themes originally...
Using Web Components in WordPress is Easier Than You Think
12.8.2021
Now that we’ve seen that web components and interactive web components are both easier than you think, let’s take a look at adding them to a content management system, namely WordPress.
There are three major ways we can add them. …
The post Using Web Components in WordPress is Easier Than...
WordPress Admin Warnings in the Block Editor
16.7.2021
We sent out an email the other week that ultimately had a <video> in the HTML markup. We send the newsletter by creating it here in the WordPress block editor, which is fetched through RSS-to-Mailchimp. Mailchimp dutifully sent it out, …
The post WordPress Admin Warnings in the Block...
Code blocks, but better
2.6.2021
Pedro Duarte made a wishlist for styled code blocks in blog posts and documentation, then hand-rolls a perfect solution for that wishlist. For example, a feature to be able to highlight certain lines or words within the code block. The …
The post Code blocks, but better appeared first...
The WordPress Evolution Toward Full-Site Editing
10.3.2021
The block editor was a game-changer for WordPress. The idea that we can create blocks of content and arrange them in a component-like fashion means we have a lot of flexibility in how we create content, as well a bunch …
The post The WordPress Evolution Toward Full-Site Editing appeared...
Rendering the WordPress philosophy in GraphQL
18.1.2021
WordPress is a CMS that’s coded in PHP. But, even though PHP is the foundation, WordPress also holds a philosophy where user needs are prioritized over developer convenience. That philosophy establishes an implicit contract between the developers building WordPress themes …
The post...
How to Work With WordPress Block Patterns
12.11.2020
Just a little post I wrote up over at The Events Calendar blog. The idea is that a set of blocks can be grouped together in WordPress, then registered in a register_block_pattern() function that makes the group available to use as a “block pattern” in any page or post.
Block patterns...
Using Markdown and Localization in the WordPress Block Editor
23.9.2020
If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?
Since the block editor is based on React, we may be tempted to use React components and HTML code for the documentation. That is the approach I followed in my previous article, which...
WordPress Contributors Seek Sponsorship for Improving Gutenberg Developer Docs
6.7.2020
A couple of WordPress contributors are currently looking for folks to sponsor them to work on the documentation for the WordPress block editor (often referred to as “Gutenberg”) and this is your chance to support them.
If you’ve developed blocks for the WordPress block editor —...
WordPress Block Transforms
20.5.2020
This has been the year of Gutenberg for us here at CSS-Tricks. In fact, that’s a goal we set at the end of last year. We’re much further along that I thought we’d be, authoring all new content in the block editor¹, enabling the block editor for all content now. That means when...
How to Use Block Variations in WordPress
6.5.2020
WordPress 5.4 was released not so long ago and, along with other improvements and bug fixes, it introduced a feature called Block Variations. I had a chance to use it on one of my recent projects and am so pleasantly surprised with how smart this feature is. I actually think it hasn’t received...
How to Create Custom WordPress Editor Blocks in 2020
6.5.2020
Peter Tasker on creating blocks right now:
It’s fairly straightforward these days to get set up with the WP CLI ‘scaffold’ command. This command will set up a WordPress theme or plugin with a ‘blocks’ folder that contains the PHP and base CSS and JavaScript required to create...